<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 成绩数据
 *
 * @type {UnwrapNestedRefs<{courseName: string, total: number, form: {courseScoreCourseName: string, courseScoreStudentNo: string, courseScoreStudentName: string, courseScoreAchievement: string, courseScoreOrderClassNo: string, courseScoreOrderClassName: string, courseScoreCourseNo: string}, pageSize: number, tableData: *[], pageNum: number}>}
 */
const scoreData = reactive({
  courseName: '',
  tableData: [],
  total: 0,
  pageSize: 5,
  pageNum: 1,
  form: {
    courseScoreOrderClassNo: '',
    courseScoreOrderClassName: '',
    courseScoreCourseNo: '',
    courseScoreCourseName: '',
    courseScoreStudentNo: '',
    courseScoreStudentName: '',
    courseScoreAchievement: '',
  }
})

/**
 * 加载成绩
 */
const loadScore = () => {
  request.get(`/api/course-score/find-score-student/${account.accountNo}`, {
    params: {
      pageNum: scoreData.pageNum,
      pageSize: scoreData.pageSize,
      courseName: scoreData.courseName,
    }
  }).then(res => {
    scoreData.tableData = res.data?.list || []
    scoreData.total = res.data?.list.map(item => item.courseScoreCountNumber)[0] || 0;
  })
}
loadScore()

/**
 * 翻页
 */
const handelCurrentChange = () => {
  // 翻页时，重新加载数据即可
  loadScore()
}

/**
 * 重置
 */
const reset = () => {
  scoreData.courseName = ''
  // 重置时，重新加载数据即可
  loadScore()
}

/**
 * 导出Excel
 */
const exportExcel = () => {
  request.post(`/api/system/export-student-score/${account.accountNo}`, null).then(res => {
    if (res.code === "200") {
      ElMessage.success("导出成功")
    }
  })
}
</script>

<template>
  <div v-if="account.accountRoleName === 'common-student' || account.accountRoleName === 'visitor-student'">
    <div class="card" style="margin-bottom: 10px;">
      <el-input v-model="scoreData.courseName" :prefix-icon="Search"
                placeholder="请输入课程名称查询"
                style="width: 300px; margin-right: 10px;"/>
      <el-button style="margin-left: 10px;" type="primary" @click="loadScore">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <div class="card" style="margin-bottom: 10px;">
      <el-button style="margin-left: 10px;" type="primary" @click="exportExcel">导出Excel</el-button>
    </div>
    <div class="card" style="margin-bottom: 10px;">
      <div>
        <el-table :data="scoreData.tableData" style="width: 100%">
          <el-table-column label="班名" prop="courseScoreOrderClassName"/>
          <el-table-column label="学号" prop="courseScoreStudentNo"/>
          <el-table-column label="姓名" prop="courseScoreStudentName"/>
          <el-table-column label="课程名" prop="courseScoreCourseName"/>
          <el-table-column label="成绩" prop="courseScoreAchievement"/>
        </el-table>
      </div>
    </div>
    <div class="card">
      <el-pagination v-model:current-page="scoreData.pageNum"
                     v-model:page-size="scoreData.pageSize"
                     :total="scoreData.total"
                     background layout="prev, pager, next" @current-change="handelCurrentChange"/>
    </div>
  </div>
</template>

<style scoped>

</style>
